<template>
  <div class="auth-layout">
    <!-- Logo和网站名称 -->
    <div class="auth-header">
      <router-link to="/" class="logo-wrapper">
        <div class="logo">
          <div class="logo-icon">
            <el-icon class="icon-large"><Comment /></el-icon>
          </div>
          <div class="logo-text">
            <h1>GovernTalk</h1>
            <p class="logo-subtitle">公考交流平台</p>
          </div>
        </div>
      </router-link>
    </div>

    <!-- 主内容区域 -->
    <main class="auth-main">
      <slot></slot>
    </main>

    <!-- 页脚 -->
    <footer class="auth-footer">
      <p>© 2024 GovernTalk 公考交流平台 版权所有</p>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue';

// 页面加载时的处理
onMounted(() => {
  // 可以在这里添加一些认证页面特定的逻辑
  document.body.classList.add('auth-body');
  return () => {
    document.body.classList.remove('auth-body');
  };
});
</script>

<style scoped>
.auth-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f5f7fa;
}

.auth-header {
  padding: 20px 0;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.logo-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  text-decoration: none;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon .icon-large {
  font-size: 24px;
  color: #409eff;
}

.logo-text h1 {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  color: #303133;
}

.logo-subtitle {
  margin: 0;
  font-size: 12px;
  color: #909399;
}

.auth-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.auth-footer {
  padding: 20px 0;
  text-align: center;
  border-top: 1px solid #ebeef5;
  background-color: #fff;
}

.auth-footer p {
  margin: 0;
  font-size: 12px;
  color: #909399;
}

/* 确保body有合适的样式 */
:global(.auth-body) {
  background-color: #f5f7fa;
}
</style>